<template>
  <div class="leave-dashboard">
    <div class="dashboard-header">
      <h1><i class="el-icon-data-analysis"></i> 员工假期数据可视化</h1>
      <p class="subtitle">各部门请假、调休和加班情况分析</p>
    </div>

    <div class="dashboard-grid">
      <div class="chart-container">
        <h2>月度请假趋势</h2>
        <leave-line-chart />
        <div class="chart-description">
          展示过去12个月各部门请假人数变化趋势，可观察到请假高峰期通常在夏季和年末。
        </div>
      </div>

      <div class="chart-container">
        <h2>请假类型分布</h2>
        <leave-pie-chart />
        <div class="chart-description">
          各类请假类型占比分析，病假和年假是主要的请假类型，占比超过70%。
        </div>
      </div>

      <div class="chart-container">
        <h2>部门加班对比</h2>
        <leave-bar-chart />
        <div class="chart-description">
          各部门加班时长对比，技术部和市场部加班时间明显高于其他部门。
        </div>
      </div>

      <div class="chart-container">
        <h2>请假热力图</h2>
        <leave-heat-map />
        <div class="chart-description">
          按星期和小时分析的请假热力图，周一周五和上午9-11点是请假高峰时段。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LeaveLineChart from '@/components/LeaveLineChart.vue'
import LeavePieChart from '@/components/LeavePieChart.vue'
import LeaveBarChart from '@/components/LeaveBarChart.vue'
import LeaveHeatMap from '@/components/LeaveHeatMap.vue'

export default {
  name: 'LeaveDashboard',
  components: {
    LeaveLineChart,
    LeavePieChart,
    LeaveBarChart,
    LeaveHeatMap
  }
}
</script>

<style scoped src="../../assets/style/LeaveDashboard.css"></style>